<template>
  <div>
    <div v-for="item in commentList" :key="item.id">
      <div style="display: inline-flex;margin-top:10px;margin-bottom:10px">
        <div style="width:40px;margin-right:10px">
          <el-avatar size="large" :src="item.avatar"></el-avatar>
        </div>
        <div>
          <div class="nickName">{{item.nickName}}</div>
          <div class="date">{{item.createDate}}</div>
          <div class="comment">{{item.content}}</div>
          <el-link type="info" @click="replyClick(item.id)">回复</el-link>
          <div v-if="item.id==showReplyId">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="comment"></el-input>
            <div style="text-align:right;margin-top:10px;margin-bottom:10px">
                <el-button type="primary" size="mini" @click="publishReplyClick(comment,item)">发布</el-button>
                <el-button type="info" size="mini" @click="cancelReplyClick">取消</el-button>
            </div>
          </div>
          <reply :commentList=item.childCommentList :pageFlag="pageFlag"></reply>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store";
export default {
  name: "reply",
  directives: {  },
  components: {
  },
  props:{
    commentList:{
      type:Array,
      default:null
    },
    pageFlag:{
      type:String,
      default:null
    }
  },
  data() {
    return {
      baseUrl:null,
      comment:"",
      showReplyId:-1,
    };
  },
  created() {
    this.baseUrl = process.env.VUE_APP_BASE_API;
  },
  methods: {
    //显示回复框
    replyClick(id){
      this.showReplyId = id;
    },
    //关闭回复框
    cancelReplyClick(){
      this.showReplyId = -1;
    },
    //发布新的评论
    publishReplyClick(comment,parent){
      console.log(comment);
      console.log(parent);
      //添加评论
      let obj = {
        parentId:parent.id,
        content:comment,
        pageFlag:this.pageFlag
      }
      store.dispatch('AddComment', obj).then(res=>{

      })
    }
  }
};
</script>
<style lang="scss" scoped>
.nickName{
  font-size: 18px;
  font-weight: 600;
}
.date{
  font-size: 12px;
  color:rgb(163, 157, 157);
}
</style>